<template>
    <div id="app" class="with-bar week-hot-wrap" :class="{'page-loading':page.loading}">
        <ui-loading v-if="initLoading" class="page-init-loading">
            <div slot="content"></div>
        </ui-loading>
        <scroll-fixed>
            <div class="ui-header">
                <page-bar>
                    <p slot="middle">一周热点</p>
                    <div slot="right"></div>
                </page-bar>
            </div>
        </scroll-fixed>

        <ui-loading v-if="page.loading" />
        <page-error v-else-if="pageError" @refresh="pageRefresh"></page-error>

        <scroll-list v-else ref="scroll" class="ui-list" :class="{'no-data':page.is_end && hot.list.length == 0}" :config="scroll" @pull="pullLoad" @bottom="loadmore">
            <page-error v-if="page.is_end && hot.list.length == 0">
                <div slot="logo">
                    <img src="../assets/page-empty.png" class="logo">
                </div>
                <div slot="text">
                    <p class="text">暂无内容</p>
                </div>
            </page-error>
            <transition-group v-else name="list" tag="div">
                <ui-item v-for="item in hot.list" :item="item" :key="item.type + '_' +item.id" ></ui-item>
            </transition-group>
        </scroll-list><!-- en dui-list -->
        <ui-tab-bar :active="page.tabBarActive" @change="tabChange"></ui-tab-bar>
        <offline :withbar="true"/>
    </div>
</template>
<script>
import Items from '../components/items.vue'
import ScrollList from '../components/scrollList.vue'
import pageBar from '../components/pagebar.vue'
import scrollFixed from '../components/scrollFixed.vue'
import pageError from '../components/pageError.vue'
import offline from '../components/offline.vue'
import UILoading from '../components/loading.vue'

import mxTabBar from '../mixins/tabbar.js'
import mxReport from '../mixins/report.js'
export default {
    name:'week-hot',
    data(){
        return {
            page:{
                tabBarActive:4,
                is_end:false,//是否已经没有数据
                page_no:1,
                channel_id:'',
                page_size: 5,
                loading:true,
            },
            pageError:false,
            initLoading:true,
            hot:{
                list:[]
            },
            scroll:{
                pull:false,
                bottom:false,
            },
            pullType: 'down'
        }
    },
    mixins: [mxTabBar,mxReport],
    components:{
        [Items.name]:Items,
        [scrollFixed.name]:scrollFixed,
        [ScrollList.name]:ScrollList,
        [offline.name]:offline,
        [UILoading.name]:UILoading,
        [pageError.name]:pageError,
        [pageBar.name]:pageBar,
    },
    mounted(){
        this.$on("RELOADDATA",type=>{
            this.$emit('PLYAER_CLOSE');
            this.page.page_no = 1;
            this.page.loading = true;
            this.page.is_end = false;
            this.scroll.bottom = false;
            this.loadPageData(true).then(rs=>{
                this.$nextTick(()=>{
                    //当第一页小于等于3跳数据时，当作pageend处理
                    this.scroll.bottom = this.hot.list.length <= 3 ? 'hidden' : false;
                })
            }).catch(e=>{
                this.pageError = true;
            }).finally(()=>{
                this.$nextTick(()=>{
                    this.initLoading = false;
                    this.page.loading = false;
                })
            })
        });
        this.$emit('RELOADDATA');
       
    },
    methods:{
        loadPageData(needClean = false,isUnshift = false,loadPageData = false){
            let url ,params = this.page;
            if(loadPageData!= "isRefresh"){
                params.action='refresh';
            }
        
            url = '?ct=week_hot&ac=get_list';
            params.type = 2; 
            params.pull = this.pullType;
            
            return this.$http.get(url,{params}).then(response=>{
                let {data} = response;
                if(needClean) this.hot.list = [],document.body.scrollTop = 0;
                if(data.code == 0){
                    this.page.is_end = !data.data.is_have_data;
                    let list = [];
                    data.data.list && data.data.list.forEach && data.data.list.forEach(item=>{
                        let tmpItem = item;
                        tmpItem.url = this.$config.pages.hotDetail + '?id=' + item.id;;
                        tmpItem.title = item.title;
                        tmpItem.type = 'week-hot';
                        tmpItem.src = item.cover_img[0];
                        tmpItem.source = {
                            name:item.source
                        }
                        tmpItem.view = item.browse_total;
                        tmpItem.time = this.$moment(item.issue_time * 1000).fromNow().replace(' ','');
                        list.push(tmpItem)
                    })

                    if(!needClean){
                        if(isUnshift){
                            let savelist = [];
                            this.hot.list.forEach(item=>{
                                if(item.is_top !== 1 && item.is_hot !== 1){
                                    savelist.push(item); 
                                }
                            })
                            this.hot.list = list.concat(savelist);
                            return data.data.count
                        }else{
                            let savelist = [];
                            list.forEach(item=>{
                                if(item.is_top !== 1 && item.is_hot !== 1){
                                    savelist.push(item); 
                                }
                            })
                            this.hot.list = this.hot.list.concat(savelist);
                        }
                    }else{
                        this.hot.list = list;
                    }
                    
                    this.page.page_no++;

                    if(params.action == 'refresh') {
                        let pagePosition = this.$utils.caches.get('pagePosition', 'session');
                        setTimeout(() => {
                            scrollTo(0, pagePosition ? pagePosition : 0);
                            this.$utils.caches.set('pagePosition', 0, 'session');
                        }, 10);
                    }
                    return data.data.count
                }else{
                    this.$toast(data.msg);
                }
            }).catch(err=>{
                window.$zEvent.$emit('ERROR',err);
                this.$toast(err);
            })
            
        },
        pullLoad(cb){
            this.pullType = 'down';
            this.scroll.bottom = false;
            this.loadPageData(false,true,"isRefresh").then((count)=>{
                this.$nextTick(() => {
                    //当第一页小于等于3跳数据时，当作pageend处理
                    this.scroll.bottom = this.hot.list.length <= 3 ? 'hidden' : false;
                    this.$refs.scroll && this.$refs.scroll.$emit('refresh_done',count)
                    cb && cb()
                });
            })
        },
        loadmore(){
            if(this.scroll.bottom) return false;
            this.pullType = 'up';
            this.scroll.bottom = true;
            this.loadPageData("","","isRefresh").then((num)=>{
                this.$nextTick(() => {
                    this.scroll.bottom = num === 0 ? 'done' : false;
                });
            })
        },
        pageRefresh(){
            this.pageError = false;
            this.$emit('RELOADDATA');
        },
    }
}
</script>
<style lang="less">
.page-bar-middle {
    font-size:36px;
    color:#282828;
    
}
.week-hot .item-single .img{
    height:5.38rem;
}
.page-error{
    margin-top:40%;
}
</style>


